<!--列表页面的关键字部分-->
<template>
  <div>
    <ul class="v-sortkey">
      <li :class="{'activeLi':GoodName}"  @click="ClassfyShowAll()">
         {{GoodName ? GoodName : '全部分类'}}
         <span class="cjyUp" :class="{cjyDown:showClassfy}">
            <i class="cjy-arrow"></i>
        </span>
      </li>
      <li :class="{'activeLi':sortName}"  @click="sortShowAll()">
           {{sortName ? sortName : '默认排序'}}
          <span class="cjyUp" :class="{cjyDown:showSort}">
            <i class="cjy-arrow"></i>
         </span>
      </li>
      <li @click="showFilterLayer()">
        筛选 
         <span class="cjyright">
            <i class="cjy-arrow"></i>
        </span>  
      </li>
    </ul>
    <!-- 全部分类列表开始 -->
     <div class="fuzzylayer-sortlist" v-show="showClassfy" @click="hideLayer()"></div>
     <ul v-show="showClassfy" class="v-sortlist">
         <li :class=" {'active': classIdx == key}" v-for="(item,key) in firstFoodsClass"  @click="filterClassify(item.classCode,key,item.className)">{{item.className}}</li>
     </ul>
    <!-- 全部分类列表结束 -->
    <!-- 默认排序开始 -->
    <div class="fuzzylayer-sortlist" v-show="showSort" @click="hideLayer()"></div>
    <ul class="v-sortlist" v-show="showSort">
      <li :class=" {'active': idx == index}" v-for="(sortItem,index) in sortList" @click="sortBy(sortItem.sortKey,sortItem.name)">{{sortItem.name}}</li>
    </ul>
    <!-- 默认排序结束 -->
    <!-- 筛选开始 -->
    <div class="filter-layer" v-show="isShow" @click="hideLayer()"></div>
    <div class="filter-wrap" v-show="isShow" transition="filter">
      <div class="filter-main" v-show="!showAll">
         <div class="priceModel">
            <h3>价格区间</h3>
            <div class="prod">
               <input class="getMinPrice" placeholder="最低价"  v-model="getMinPrice" ref="minPriceInput" v-on:blur="submitMin(getMinPrice)" @keyup.enter="submitMin(getMinPrice)" type="tel"  /> - 
							 <input class="getMaxPrice" placeholder="最高价" v-model="getMaxPrice" ref="maxPriceInput" v-on:blur="submitMax(getMaxPrice)" @keyup.enter="submitMax(getMaxPrice)" type="tel" />
            </div>
        </div>
        <div class="brandModel">
            <h3>品牌</h3>
            <ul class="brand-ul" v-if="brandLists">
              <li v-for="(item,index) in brandLists" :class="{'active': fBrandIdx == index}" @click="chooseBrand(item.brandId,index)"><span>{{item.brandName}}</span></li>
           </ul>
        </div>    

      </div>
      <!-- 全部品牌字母检索 -->
      <div class="allBrand" v-show="showAll">
        <div class="allBrandModel">
          <span @click="GoBack" class="goBackArrow"><i class="icon njfont nj-goback"></i></span>
          <h3>全部品牌</h3>
          <div class="brand-container">
            <ul class="brand-ul" v-if="brandLists">
                <li v-for="(item,index) in AllbrandLists" :class="{'active': fBrandIdx == index}" @click="chooseBrand(item.brandId,index)"><span>{{item.brandName}}</span></li>
            </ul>
           </div>
        </div>
        <!-- <ul class="CharCode">
          <li @click="char(item)"  v-for="item in CharCodeList">{{item}}</li>
        </ul> -->
      </div>
      <div class="filter-btn">
        <span class="bt1" @click="resetFilter()">重置</span>
        <span class="bt2" @click="filterGDList()">完成({{this.num}})</span>
      </div>
    </div>
    <!-- 筛选结束 -->
  </div>
</template>

<script>
import { queryBrandList} from '@/utils/ReturnAxios'
import axios from "axios"
import {Toast} from '@/utils/toast.js'
  export default {
    data() {
      return {
        sortList:[{
          name:'默认排序',
          sortKey:0,
        },{
          name:'价格高到低',
          sortKey:1,
        },{
          name:'价格低到高',
          sortKey:2
        },{
          name:'销量高到低',
          sortKey:3
        }
        // ,{
        //   name:'销量低到高',
        //   sortKey:4
        // }
        // ,{
        //   name:'优惠优先',
        //   sortKey:5
        // }
        ],
        GoodName:'',   //分类名称标题
        sortName:'',   //排序名称
        showClassfy: false,
        showSort: false,
        isShow: false, //筛选层的显示隐藏
        idx: 0,
        classIdx:0,
        fBrandIdx: null, // 品牌索引值
        brandLists: [],
        AllbrandLists: [],
        // 过滤数据字段
        goodsClassCode:'',   //商品名称
        isPutTimeSort:2, //默认排序
        ifSaleSort:'',      //销量排序  1 正序，2 逆序
        ifWspriceSort:'',   // 价格排序  1 正序，2 逆序
        ifPreferSort:'',   //是否优惠优先排序  1 是，0 否
        minPrice:'',      //最低价
        maxPrice:'',      //最高价
        brandId:'',  //品牌id
        // price1:'',
        // price2:'',
        foodsClassList:null,
        firstFoodsClass:null,
        CharCodeList:[], //字母表
        showAll:false,
        brandOpCode:'',
        price1:'',
        price2:'',

      }
    },
    props:{
      num:{
        type:Number,
        default:0
      }
    },
     watch: {
      config(data) {
        console.log(data,'data')
        this.$store.commit('cjy/CHANGE_COUPONS_CONFIG', data)
      }
    },
    computed: {
      config() {
        let config = {}
        this.goodsClassCode ? config.goodsClassCode = this.goodsClassCode : ''
        this.isPutTimeSort ? (config.isPutTimeSort = this.isPutTimeSort) : config.isPutTimeSort == 2;
        this.ifSaleSort ? config.ifSaleSort = this.ifSaleSort : ''
        this.ifWspriceSort ? config.ifWspriceSort = this.ifWspriceSort : ''
        this.ifPreferSort ? config.ifPreferSort = this.ifPreferSort : ''
        this.minPrice ? config.minPrice = this.minPrice : ''
        this.maxPrice ? config.maxPrice = this.maxPrice : ''
        this.brandId ? config.brandId = this.brandId : ''
        this.brandOpCode ?  config.brandOpCode = this.brandOpCode : ''    
        return config
      },
      getMinPrice: {
			set() {
				let dom = document.querySelector(".getMinPrice");
				let val = dom.value;
				let reg = /^[0-9]{0,}$/;
				if (reg.test(val)) {
					this.price1 = val;
				} else {
					this.$refs.minPriceInput.value = this.price1;
				}
			},
			get() {
				return this.price1;
			}
		},
		getMaxPrice: {
			set() {
				let dom = document.querySelector(".getMaxPrice");
				let val = dom.value;
				let reg = /^[0-9]{0,}$/;
				if (reg.test(val)) {
					this.price2 = val;
				} else {
					this.$refs.maxPriceInput.value = this.price2;
				}
			},
			get() {
				return this.price2;
			}
		}
    },
    methods: {
      // 初始化一级分类名称
      async getFoodsClassList(){ //请求餐点分类数据
            let url = window.api.goods_host+'/goodsClass/queryParishFoodGoodsclassInfo';
            let sessionId = localStorage.getItem('sessionId');
            let config = {
                url,
                method: "get",
                headers: {sessionId},
                params:{
                    enterpriseid:window.api.enterpriseid,
                    enterpriseCode:window.api.enterpriseCode,
                    storeCode:window.api.storeCode,
                }
            }
            await axios(config).then(res=>{
                if(res.status==200 && res.data.returnCode==1){
                    this.foodsClassList = res.data.data[0];
                    this.firstFoodsClass = this.foodsClassList.filter(ele => {
                        return ele.level==1
                    });
                    this.firstFoodsClass.unshift({'className':'全部',classCode:''})
                }else{
                    Toast({
                        message: '获取分类数据失败',
                        duration: 2000,
                        type: 'fail'
                    });
                }
            }).catch(res=>{
                Toast({
                    message: '获取分类数据失败',
                    duration: 2000,
                    type: 'fail'
                });
            })
            console.log(this.firstFoodsClass,'***888888')
        },
      // 初始化品牌数据
       async brandData(){  
        let config={
            promCode:this.$route.query.promCode,
            pageTag:'dishGoods'
        }
        var ress = await queryBrandList(config)
        var brandData = ress.data.data[0]
        this.AllbrandLists = brandData 
        if(brandData.length && brandData.length > 30) {
           brandData .splice(29,0,{brandName:'全部品牌…',brandId:'all'})
           this.brandLists = brandData .slice(0,30)        
          
        } else {
          this.brandLists = brandData
        }
      },
      //点击隐藏蒙层
      hideLayer() {
        this.showClassfy = false
        this.showSort = false
        this.isShow = false
      },
      // 点击全部分类
      ClassfyShowAll() {
          this.showSort = false
          this.showClassfy = !this.showClassfy
      },
      // 点击默认排序
      sortShowAll() {
        this.showClassfy = false
        this.showSort = !this.showSort
      },
      // 点击全部分类数据
      filterClassify(code,key,name) {
          this.classIdx = key
          console.log('code',code,key)
          setTimeout(() => {
            this.showClassfy = false
           }, 100)
           this.GoodName = code ? name : ''
           this.goodsClassCode = code
      },
      // 点击默认排序数据
      sortBy(key,name) {
        this.idx = key
        console.log(this.idx,'key')
        setTimeout(() => {
          this.showSort = false
        }, 100)
        this.sortName = key ? name : ''
        switch(key) {
          case 0 :
            this.isPutTimeSort = 2
            this.ifSaleSort = null
            this.ifPreferSort = null
            this.ifWspriceSort = null
            break;
          case 1 :
            this.ifWspriceSort = 2
            this.isPutTimeSort = null
            this.ifSaleSort = null
            this.ifPreferSort = null
            break;
          case 2 :
            this.ifWspriceSort = 1
            this.isPutTimeSort = null
            this.ifSaleSort = null
            this.ifPreferSort = null
            break;
          case 3 :
            this.ifSaleSort = 2
            this.isPutTimeSort = null
            this.ifWspriceSort = null
            this.ifPreferSort = null
            break;
           case 4 :
            this.ifSaleSort = 1
            this.isPutTimeSort = null
            this.ifWspriceSort = null
            this.ifPreferSort = null
            break;
           case 5 :
            this.ifPreferSort = 1
            this.isPutTimeSort = null
            this.ifSaleSort = null
            this.ifWspriceSort = null
            break;      
        }
      },
      //点击筛选
      showFilterLayer() { 
        this.showClassfy = false
        this.showSort = false
        this.isShow = true
      },
      // 选择品牌
      chooseBrand(id, index) {
        console.log('选择品牌')
        if(id == 'all') {
          this.showAll = true
          this.AllbrandLists.splice(29,1,)
        } else {
          this.fBrandIdx = index
          this.brandId = id
        }
      },
       //筛选重置操作
      resetFilter() { 
        console.log('重置')
        this.minPrice='',
        this.maxPrice='',
        this.price1='',
        this.price2='',
        this.brandId = null,
        this.fBrandIdx=null
      },
      //筛选确定操作
      filterGDList() {
        console.log(this.price1,this.price2,'文本框数据')
        // this.minPrice = this.price1
        // this.maxPrice = this.price2
        this.isShow = false
      },
      // 26个英文字母
      CharCode() {
        for(var i=65;i<91;i++){
            this.CharCodeList.push(String.fromCharCode(i));
        }
      },
      GoBack() {
        this.showAll = false
      },
      char(item) {
        this.brandOpCode = item
      },
      submitMin(val) {
			  this.minPrice = this.price1;
		  },
      submitMax(val) {
        this.maxPrice = this.price2;
      }
    },
    created() {
       this.getFoodsClassList();
      this.brandData()
      // this.CharCode()
    }
  }

</script>

<style>
  .v-sortkey {
    width: 100%;
    height: 2rem;
    background: white;
    box-sizing: border-box;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #EAEAEA;
    display: flex;
    position: relative;
    z-index: 2
    /*筛选样式修改*/
  }

  .v-sortkey li {
    flex: 1;
    height: 100%;
    font-size: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .v-sortkey li.activeLi {
     color:#38b035
  }
  .v-sortkey li.activeLi .cjy-arrow {
     border-bottom: 0.35rem solid #38b035
  }
  .fuzzylayer-sortlist {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .3;
    background: black;
  }

  .v-sortlist {
    transition: 0.9s;
    width: 100%;
    background: white;
    position: absolute;
    z-index: 1100;
    max-height: 16rem;
    overflow: auto;
    box-sizing: border-box;
  }

  .v-sortlist li {
    text-align: left;
    padding: 0 1rem;
    height: 1.6rem;
    line-height: 1.6rem;
    border-bottom: 1px solid #EAEAEA;
  }

  .v-sortlist li.active {
    color: #38b035;
  }

  .filter-layer {
    position: fixed;
    z-index: 1200;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .3);
  }

  .filter-wrap {
    position: fixed;
    z-index: 1300;
    width: 75%;
    height: 100%;
    right: 0;
    top: 0;
    background: white;
    display: flex;
    flex-direction: column;
  }

  .filter-wrap .filter-main {
    flex: 1;
    padding: 1rem 0.5rem 0 1rem;
    box-sizing: border-box;
    overflow: scroll;
    position: relative
  }
  .filter-main h3 {
        text-align: left;
        font-size: 0.7rem;
        line-height: 1.8rem;
    }
  .priceModel {
        margin-bottom: 0.6rem;
    }
    .priceModel .prod {
    text-align: left;
  }
    .prod input {
        width: 45%;
        border:1px solid #ddd;
        text-align: center;
        height: 1.2rem;
        line-height: 1.2rem;
        display: inline-block;
    }
  .brand-ul {
    text-align: left;
    overflow: auto;
    padding-bottom: 2rem;
  }

  .brand-ul li {
    border:1px solid #ddd;
    padding:0  0.2rem;
    text-align: center;
    margin: 0 0.3rem 0.5rem 0;
    font-size: 0.6rem;
    width: 30%;
    float: left;
    height: 1.5rem;
    line-height: 1.5rem;
    box-sizing: border-box;
  }
  .brand-ul li  span {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap 
    
  }

  .brand-ul li.active {
    border: 1px solid #9aed96;
    color: #38b035;
    background:#e0f5df; 
    box-sizing: border-box;
  }

   .cjy-arrow {
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0%;
		margin: auto;
		border-left: 0.25rem solid transparent;
		border-right: 0.25rem solid transparent;
		border-bottom: 0.35rem solid #999;
		border-top: 0 solid transparent;
		/*margin-bottom: -0.175rem;*/
	}
    .cjyUp {
		transform: rotateZ(-180deg);
		transition: 0.3s;
		height: 100%;
		width: 0.5rem;
    margin-left: 0.3rem;
    /* position: absolute;
    right: 0.2rem;
		top: 0 */
	}
	
	.cjyDown {
		transform: rotateZ(0deg);
	}
    .cjyright{
		transform: rotateZ(90deg);
        position: absolute;
		transition: 0.3s;
		right: 1.3rem;
		height: 100%;
		width: 0.5rem;
		top: 0
	}
  .filter-btn {
    width: 75%;
    height:2rem;
    line-height: 2rem;
    position: fixed;
    bottom: 0;
    display: flex;
    box-sizing: border-box;
    text-align:center
  }

  .filter-btn span {
    display: block;
    flex: 1;
    color: #fff;
    font-size: 0.8rem;
  }
.filter-btn .bt1 {
  background: #cecece
}
  .filter-btn .bt2 {
    color: #fff;
    background: #EF5423;
    flex: 2
  }

  .filter-transition {
    transition: transform 200ms ease-in;
  }

  .filter-enter,
  .filter-leave {
    transform: translate3d( 100%, 0, 0);
  }

  .sortlist-transition {
    transition: transform 200ms ease-in;
  }

  .sortlist-enter,
  .sortlist-leave {
    transform: translate3d( 0, -100%, 0);
  }
  .allBrand {
    padding: 1rem 0.5rem 0 1rem;
    box-sizing: border-box;
    position: relative;
    height: 100%;
  }
  .allBrandModel {
    position: relative;
    height: 100%;
  }
  .allBrandModel h3 {
    text-align: left;
    line-height: 2rem;
    padding-left: 2rem;
  }
  .goBackArrow {
    text-align: left;
    width: 2rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 0.5rem
  }
  .brand-container {
    height: 88%;
    overflow: scroll;
  }
  .brand-container .brand-ul {
  }
  .CharCode {
    position: absolute; 
    right: 0.2rem;
    top: 0.5rem;
    font-size: 0.7rem;
  }
</style>
